<template>
  <div class="step">
    <span :class="{active:active>=i}" class="block" v-for="(v,i) in list" :key="i" />
  </div>
</template>

<script>
export default {
  name: 'step',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number
    }
  }
}
</script>
<style lang="stylus">
.step
  display flex

  .block
    flex 1
    height 4px
    border none
    margin-right 3px
    background #d2d2d0
    display inline-block

    &.active
      background #b11d29

    &:last-child
      margin-right 0
</style>
